<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客系统所有文章页面</title>
    <link rel="stylesheet" href="./css/common_all_list.css">
    <link rel="stylesheet" href="./css/blog_all_list.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/common.js"></script>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="./imag/logo.jpg" alt="博客图标">
        <span class="title">博客系统</span>
        <!-- 用于将图片 和 超链接分割开 -->
        <div class="splacer"></div>
        <a href="./blog_list.html">主页</a>
        <a href="./blog_login.html">登录</a>
    </div>
    <!-- 文章整体放置栏 -->
    <div class="container">
        <div class="container-right">
            <!-- 整个文章内容的div -->
            <div id="artListDiv">

            </div>
            <hr>
            <div class="blog-pagnation-wrapper">
                <button onclick="artFirst()" class="blog-pagnation-item">首页</button>
                <button onclick="artBefore()" class="blog-pagnation-item">上一页</button>
                <button onclick="artNext()" class="blog-pagnation-item">下一页</button>
                <button onclick="artEnd()" class="blog-pagnation-item">末页</button>
            </div>
        </div>
    </div>
</body>

<script>
    // 表示当前处于的页数
    let pindex = 1;
    // 当前页的文章数量
    let psize = 4;

    // 总的页数
    let pcount = 1;

    // 先获取到当前页面的页码数
    pindex = getUrlArtId("pindex") == "" ? 1 : getUrlArtId("pindex"); //判断是否为空

    function initPage() {
        jQuery.ajax({
            url: "/art/getartbypage",
            type: "POST",
            data: { "pindex": pindex, "psize": psize },
            success: function (result) {
                if (result != null && result.code == 200 && result.data.list.length > 0) {
                    let artListHtml = "";
                    for (let i = 0; i < result.data.list.length; i++) {
                        let articleinfo = result.data.list[i];//文章的信息 
                        artListHtml += '<div class="blog">';
                        artListHtml += '<div class="title">' + articleinfo.title + '</div>';
                        artListHtml += '<div class="date">' + articleinfo.updatetime + '</div>';
                        artListHtml += '<div class="desc">' + articleinfo.content + '​​</div>';
                        artListHtml += '<a href="./blog_detail.html?id=' + articleinfo.id + '">☞ 文章详情 ☜</a>';
                        artListHtml += '</div>';
                    }
                    jQuery("#artListDiv").html(artListHtml);
                    pcount = result.data.pcount;
                } else {
                    alert("获取文章内容失败，请重新尝试获取!");
                }
            }
        });
    }
    initPage();

    // 跳转到文章的首页
    function artFirst() {
        if (pindex <= 1) {
            alert("此页面已经是文章的首页!");
            return;
        }
        location.href = "/blog_all_list.html";
    }

    // 跳转到上一页
    function artBefore() {
        if (pindex <= 1) {
            alert("此页面已经是文章的首页!");
            return;
        }
        pindex = parseInt(pindex) - 1;
        location.href = "/blog_all_list.html?pindex=" + pindex;
    }

    // 跳转到下一页
    function artNext() {
        if (pindex >= pcount) {
            alert("此页面已经是文章的末页!");
            return;
        }
        pindex = parseInt(pindex) + 1;
        location.href = "/blog_all_list.html?pindex=" + pindex;
    }

    //跳转到文章末尾
    function artEnd() {
        if (pindex >= pcount) {
            alert("此页面已经是文章的末页!");
            return;
        }
        pindex = pcount;
        location.href = "/blog_all_list.html?pindex=" + pindex;
    }

</script>

</html>